tags: ItIron2021 Javascript

前言

終於用了4天的時間把this相關的題型都跑完了，再次強調，我們涵蓋的還是偏表面的理論，實際上this在js還有一些更底層的運作原理，但要完全掌握的成本真的過高，如果你有發現之前談過的概念不足以應付你的面試歡迎在留言跟我說，我會在針對這部分新增一些篇幅! 今天我們來點開心的主題吧，短短兩行的程式碼而已!

本日題目與解釋

請問下方程式碼的輸出結果為?

const result = 0 && 1 || 1 && 2
console.log(result)

今天防雷圖也換個口味，來看可愛的狗勾唄!

最終的輸出結果為以下

2

這個題目要考的概念很單純，考驗你是否了解基本的運算子優先序(operator precedence)，以及你是否真的了解 && 和 ||運算子怎麼運作的。

要解這個題目首先你要知道這兩個運算子到底誰的優先序高，你才知道該先處理哪個部分。根據MDN文件的說法，&&運算子優先序為6，||運算子則為5，因此你需要先處理左右兩端的判斷，可以把它想像成這樣。

const result = (0 && 1) || (1 && 2)

接著就是&&以及||運算子底層的原理了，看似複雜但實際上相當的簡單，我這邊直接列出我常用的結論，你可以自己去探究底層的原理。

• && => 當左邊的運算元可以被轉為true時就回傳右邊運算元，反之回傳左邊運算元
• || => 當左邊的運算元可以被轉為false時就回傳右邊運算元，反之回傳左邊運算元

至於為什麼都是判斷左邊的運算元呢，原因在於我們之前有稍稍提到的運算子相依性(operator associativity)，這兩個運算子都屬於左相依性，需要由左往右進行判斷。現在你知道規則了，我們一步步來拆解吧! 首先處理0 && 1 和 1 && 2

0 && 1 => 左邊無法被轉為true，所以回傳左邊，最終回傳0
1 && 2 => 左邊可以被轉為true，所以回傳右邊，最終回傳2

所以原先的程式瑪最終會變為

const result = (0 && 1) || (1 && 2)
             = 0 || 2

最終判斷0 || 2

0 || 2 => 左邊可以被轉為false，所以回傳右邊，最終回傳2

如何? 了解規則之後一點都不難了對吧! 當時跑到這個題目時有幾個同學問了一些問題

1. 運算子優先序跟相依性要完全背下來嗎?

當然不用，不過你需要知道幾個最基本的，比方說Grouping，也就是小括號有著最高的優先序，而賦值的行為優先序很低(3)，然後 &&優於||，這樣就足夠你應付日常的開發了。

2. &&和||這種不是用在布林值的用法有實際的例子嗎?

當然有，我腦中馬上想到的就是react中條件渲染的寫法，下方的組件會在isAdmin為true的時候才渲染。

isAdmin && <UserEditPanel />

或是有時候你在呼叫函數前須要先確認函數是否存在

callName && callName()

這些都是很常見的應用，當然後者現在有更棒的運算子可以用了，這個我們就以後再談吧!

本日核心觀念與總結

核心觀念

運算子優先序、運算子相依性、&&以及||運算子

總結

• 了解基本的運算子優先序及運算子相依性
• 了解&& 以及 ||實際上的判斷方式

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!